<template>
  <ul class="footer-bar">
    <li
      class="footer-bar-item"
      v-for="nav in navs"
      :key="nav.path"
      is="router-link"
      :to="nav.path"
      tag="li"
    >
      <div class="icon">
        <i class="iconfont" v-html="nav.meta.icon"><span></span></i>
      </div>
      <div class="title">{{ nav.meta.title }}</div>
    </li>
  </ul>
</template>

<script>
import routes from '@/router/routes'

export default {
  name: 'FooterBar',
  computed: {
    // 计算出在 FooterBar 上的每一项
    navs() {
      console.log(routes)
      return routes.filter((roude) => roude.meta?.inFooter) // 验证，配置了meta执行
    }
  }
}
</script>

<style lang="less" scoped>
@font-face {
  font-family: 'iconfont'; /* Project id 2626983 */
  src: url('//at.alicdn.com/t/font_2626983_nps2bdxfk5f.woff2?t=1624364353660')
      format('woff2'),
    url('//at.alicdn.com/t/font_2626983_nps2bdxfk5f.woff?t=1624364353660')
      format('woff'),
    url('//at.alicdn.com/t/font_2626983_nps2bdxfk5f.ttf?t=1624364353660')
      format('truetype');
}
.iconfont {
  font-family: 'iconfont' !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}
.footer-bar {
  display: flex;
  justify-content: space-evenly;
  width: 100%;
  height: 52px;
  font-size: 14px;
  color: #333333;
  background: #fff;
  &-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
  }
  &-item .icon i {
    font-size: 18px !important;
  }
  &-item:hover {
    color: #ec7b67;
    font-weight: 800;
  }
}
</style>
